<template>
  <div class="order">
    <button @click="() => testData.unshift({id: Math.random(), name: '测试数据'})">添加</button>
    <button @click="() => testData.pop()">随机移除</button>
    <button @click="() => testData.sort((a, b) => Math.random() - 0.5)">洗牌</button>
    <TransitionGroup name="test">
      <li v-for="item in testData" :key="item.id">{{item.name}}</li>
    </TransitionGroup>
  </div>
</template>

<script setup>
import { ref } from "vue"
const testData = ref([
  {
    id: 1,
    name: "web前端"
  },
  {
    id: 2,
    name: "web后端"
  },
  {
    id: 3,
    name: "linux运维"
  },
  {
    id: 4,
    name: "测试"
  },
  {
    id: 5,
    name: "产品经理"
  },
  {
    id: 6,
    name: "技术总监"
  }])
</script>

<style lang="less" scoped>
.test-move,
.test-enter-active,
.test-leave-active {
  transition: all .5s ease;
  // position: absolute;
}

.test-enter-from,
.test-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.test-leave-active {
  position: absolute;
}
</style>
